<template>
	<view class="page-orderDetail page">
		<view class="b-header">
			<pageHeader title="订单详情"></pageHeader>
		</view>
		<view class="b-content p-30 p-t-50">
			<view class="fz54 c-000 mb-30">已发货</view>
			<orderItemDetail></orderItemDetail>
			<view class="df-ac p-30 bs" style="border-radius: 20rpx;">
				<image src="../../static/imgs/pos.png" style="width: 70rpx; height: 70rpx;" mode=""></image>
				<view class="c-72 ml-30">
					<view class="fz30 mb-20"><text class="c-000 ">福记层</text>131****5214</view>
					<view class="fz24">天津市河西区和平大街8273号</view>
				</view>
			</view>
			<view class="bs p-30">
				<view class="detail">
					<view class="label"> <text class="des">支付方式</text>微信支付</view>
					<view class="label"> <text class="des">订单号</text>12345678954223</view>
					<view class="label"> <text class="des">支付流水号</text>554531321543</view>
					<view class="label"><text class="des">实付金额 </text>￥195</view>
					<view class="label"> <text class="des">提交时间</text>2017-05-01 16:00</view>
					<view class="label"> <text class="des">付款时间</text>2017-05-01 16:00</view>
					<view class="label"> <text class="des">发货时间</text>2017-05-01 16:00</view>
					<view class="label"> <text class="des">成交时间</text>2017-05-01 16:00</view>
				</view>
			</view>
		</view>
		<view class="df p-r-60" style="justify-content: flex-end;">
			<view class="btn-order">退款</view>
			
		</view>
	</view>
</template>

<script>
	import tab from '../../components/tab.vue'
	import orderItemDetail from '../../components/orderItemDetail.vue'
	export default {
		components: {
			tab,
			orderItemDetail
		},
		data() {
			return {
				tab:[
					{id:1,name:'全部'},
					{id:2,name:'待支付'},
					{id:3,name:'待发货'},
					{id:4,name:'待收货'},
					{id:5,name:'售后'},
				],
				type:''
			}
		},
		onLoad(op) {
			this.type = op.type
		},
		methods: {
			tabClick(data) {
				this.type = data.id
			}
		}
	}
</script>

<style lang="scss">
.page-orderDetail.page {
		padding-top: 100rpx;
	.b-content {
		// height: calc(100vh - 100rpx);
		.detail {
			font-size: 24rpx;
			.label {
				margin-bottom: 30rpx;
				color: #727C8E;
			}
			.des {
				color: #4C475A;
				display: inline-block;
				width: 140rpx;
			}
		}
	}
	.btn-order {
		width: 160rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border: 1px solid #ccc;
		color: #666;
		border-radius: 7rpx;
		font-size: 24rpx;
		margin-left: 20rpx;
	
		&.red {
			border: 1px solid #FE5634;
			color: #FE5634;
		}
	}
}
</style>
